/**
 * 
 * @param key 存储到localStorage 的key
 * @param defaultValue 默认值
 */
// useSyncExternalStore 是 React 18 引入的一个 Hook，
// 用于从外部存储（例如状态管理库、浏览器 API 等）获取状态并在组件中同步显示  

export const useStorage = (key: any,defaultValue?: any) => {
    function subscribe(callback:()=>void) {
        window.addEventListener('storage',(e)=>{
            // console.log('触发了',callback);
            callback();
        });
        // 取消订阅
        return ()=>{
            window.removeEventListener('storage',callback);  
        }
    }
    //从localStorage中获取数据 如果读不到返回默认值
    function getSnapshot() {
        let result = localStorage.getItem(key);
        if(result) {
           result =  JSON.parse(result);
        }else {
            result = null;
        }
        return result || defaultValue;
    }

    /**
     * 修改数据
     */
    function setStorage(value: any) {
      localStorage.setItem(key,JSON.stringify(value));
      // new StorageEvent('storage'):当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件。
      window.dispatchEvent(new StorageEvent('storage'));  // 跨标签页通信 
    }   

    /**
     * useSyncExternalStore(subscribe,getSnapshot,getServerSnapshot)
     * subscribe:用来订阅数据源的变化，接收一个回调函数，在数据源更新时调用该回调函数
     * getSnapshot: 获取当前数据源的快照（当前状态）
     * getServerSnapshot?:在服务器端渲染时用来获取数据源的快照
     */
    const res = useSyncExternalStore(subscribe,getSnapshot);

    return [res,setStorage];
}